<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/prewimg.css">
		<link href="../css/iconfontt.css" rel="stylesheet" />
		<style type="text/css">
			html,
			body {
				width: 100%;
				background-color: #efeff4;
			}
			
			.bg-color {
				background-color: #3B559F;
				box-shadow: none;
			}
			
			.bg-color div {
				font-size: 80%;
				color: #FFFFFF;
				margin-left: 1%;
				margin-top: 3.6%;
			}
			
			.dingwei-png {
				width: 16px;
				height: 16px;
			}
			
			.bg-color .add-png {
				width: 7%;
				float: right;
			}
			
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 30px;
				height: 30px;
				border-radius: 100%;
				z-index: 3;
			}
			
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			
			.mui-pull-top-wrapper {
				width: 32px;
				height: 32px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
			}
			
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				margin: 0;
			}
			
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				-webkit-transform: rotate(180deg) translateZ(0);
			}
			
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 30px;
				color: #777;
			}
			
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 30px;
				height: 30px;
				margin: 0 auto;
			}
			
			.mui-pull-top-canvas canvas {
				width: 30px;
			}
			
			.mui-pull-left {
				color: #FFFFFF;
				position: absolute;
				bottom: 12px;
			}
			
			.mui-pull-left span{
				font-size: 18px;	
			}
			
			.mui-control-item {
				width: 25%!important;
			}
			
			@keyframes myfirst {
				0% {
					transform: translate(0px, 0px);
				}
				50% {
					transform: translate(0px, -10px);
				}
				100% {
					transform: translate(0px, 0px);
				}
			}
			
			.mui-slider-progress-bar {
				width: 50%!important;
			}
			
			.mui-table-view {
				list-style-image: none!important;
				background-color: #F7F7F7;
			}
			
			.mui-card {
				background-color: white;
				width: 100%;
				margin-left: 0;
				height: auto;
				margin-top: 0;
				box-shadow: none;
				background-clip: padding-box!important;
			}
			
			.mui-card .imggg {
				width: 34px!important;
				width: 34px!important;
			}
			
			.follow-div {
				float: right;
				right: 0;
				padding: 4px 13px;
				border: 1px solid #3A96FC;
				border-radius: 2px;
				color: #3A96FC;
			}
			
			.mui-card-header {
				border: 0!important;
			}
			
			.mui-media-body span {
				font-size: 95%;
			}
			
			.mui-media-body text {
				font-size: 80%;
				color: #A7A5A5;
			}
			
			.area-div {
				display: flex;
				margin-left: 3%;
				color: #A7A5A5;
				font-size: 80%;
				margin-right: 3.5%;
				padding: 0;
			}
			
			.area-div .area-img {
				width: 4%!important;
				height: 4%!important;
				position: relative;
				margin-top: 3px;
			}
			
			.write-div {
				width: 91%;
				font-size: 90%;
				z-index: 99;
				margin-left: 3.5%;
				padding-bottom: 1%;
			}
			
			.mui-cardfooter {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				font-size: 130%;
				padding: 5px 0;
				margin: 0;
				color: #000000;
				box-shadow: none;
				border-top: 1px solid #F5F5F5;
			}
			
			.foot-cont {
				width: 33.3333%;
			}
			
			.foot-cont text {
				display: none;
			}
			
			.commentcont text {
				display: none;
			}
			
			#imgcontent {
				width: 96.5%;
				margin-left: 3.5%;
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 1.5%;
				padding: 0;
			}
			
			.imgarea {
				overflow: hidden;
				background-color: aqua;
				border-radius: 2px;
				list-style: none;
			}
			
			.imgarea img {
				margin-bottom: 0;
			}
			
			.mui-card-footer-bar {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.mui-card-footer-bar span {
				margin-left: 3%;
			}
			
			.footer-num {
				font-size: 70%;
			}
			
			.bottom-png {
				width: 15%!important;
			}
			
			.nodong-div {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				padding: 20% 0;
				background-color: white;
				margin-top: 3%;
			}
			
			.img-div {
				width: 100%;
			}
			
			.img-png {
				width: 26%;
				margin-left: 37%;
			}
			
			.btn-div {
				width: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #1484FE;
				font-size: 80%;
				margin-bottom: 0;
				width: 40%;
				padding: 2% 0;
				border-radius: 4px;
				margin-top: 3%;
			}
			
			.btn-div span {
				margin-top: 1%;
				color: #FFFFFF;
				margin-left: 2%;
			}
			
			.fiends-div {
				width: 100%;
				background-color: #FFFFFF;
				border-bottom: 1px solid #F7F7F7;
				display: flex;
				flex-wrap: wrap;
				padding: 2% 0;
			}
			
			.friend-heddimg {
				width: 12%;
				margin-right: 3%;
				margin-left: 3%;
			}
			
			.card-div {
				display: none;
			}
			
			.text-div {
				margin-top: 2px;
			}
			
			.text-div text {
				display: block;
			}
			
			.p-text {
				font-size: 80%;
				margin-bottom: 0;
			}
			
			.mui-slider-item {
				border: 0!important;
				width: 100%;
				height: 100%;
				list-style: none!important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar bg-color mui-bar-nav " id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="a-text"><span id="school-span"></span></a>
		</header>
		<div class="mui-content mui-scroll-wrapper" id="offCanvasContentScroll">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">
						<span class="iconfont icon-xinwendongtai" style="margin-right: 5%;"></span>Ta校朋友
					</a>
					<a class="mui-control-item mui-active" href="#item2mobile">
						<span class="iconfont icon-gerenkongjiandongtai" style="margin-right: 5%;"></span>Ta校动态
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4" style="margin-top: -1px;z-index: 99;position: relative;"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" id="ulcontent1"></ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content mui-active">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" id="ulcontent2"></ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.pullToRefresh.js"></script>
		<script src="../js/mui.pullToRefresh.material.js"></script>
		<script src="../js/immersed.js"></script>
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<script src="../js/arttmpl.js"></script>
		<script src="../js/app.min.js"></script>
		<script type="text/javascript">
			mui.previewImage(function(img) {
				plus.webview.currentWebview().setStyle({
					top: '0px',
					bottom: '0px'
				})
			}, function(img) {
				plus.webview.currentWebview().setStyle({
					top: '0px',
					bottom: '50px'
				})
			});
			mui.init();
			var schoolnum = 0;
			var schoolfriendnum = 0;
			//阻尼系数
			var deceleration = mui.os.ios ? 0.003 : 0.0009;
			mui('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: false, //是否显示滚动条
				deceleration: deceleration
			});
			mui.ready(function() {
				//循环初始化所有下拉刷新，上拉加载。
				mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
					mui(pullRefreshEl).pullToRefresh({
						down: {
							callback: function() {
								var collage = document.getElementById('school-span');
								var self = this;
								setTimeout(function() {
									if(index == 0) {
										schoolfriendnum = 1;
										Ta_schoolfiends(collage.textContent , schoolfriendnum);
									}else{
										schoolnum = 1;
										Ta_schoolwall(collage.textContent , schoolnum);
									}
									self.endPullDownToRefresh();
								}, 1000);
							}
						},
						up: {
							callback: function() {
								var self = this;
								var collage = document.getElementById('school-span');
								setTimeout(function() {
									if(index == 0) {
										schoolfriendnum ++;
										Ta_schoolfiends(collage.textContent , schoolfriendnum);
										self.endPullUpToRefresh();
									}else{
										schoolnum ++;
										Ta_schoolwall(collage.textContent , schoolnum);
										self.endPullUpToRefresh();
									}
								}, 1000);
							}
						}
					});
				});
			});

			var alllistcontent = function(cont , numm) {
				var record = cont;
				console.log('1111111');
				for(var g = 0; g < record.length; g++) {
					if(record[g].lydongtai_Img) {
						var a = '';
						a = record[g].lydongtai_Img.split(',');
						record[g].lydongtai_Img = a;
					} else {
						record[g].lydongtai_Img = '';
					}
					if(record[g].lydongtai_Whb) {
						var b = '';
						b = record[g].lydongtai_Whb.split(',');
						record[g].lydongtai_Whb = b;
					} else {
						record[g].lydongtai_Whb = '';
					}
				}

				//利用图灵接口演示聊天布局 
				//追加模板消息
	
				var str = template('Taschoolfriend-card', {
					"record": record
				});
				if(numm == 1) {
					console.log('numm == 1');
					document.getElementById('ulcontent2').innerHTML = str;
				} else {
					console.log('numm != 1');
					document.getElementById('ulcontent2').innerHTML += str;
				}
				var imgas = document.getElementsByClassName("imgcontent");
				var viewwidth = document.body.clientWidth;
				console.log(imgas.length + "---" + numm);
				var k = 0;
				for(var i = (numm - 1) * 2; i < imgas.length; i++) {
					if(record[k].lydongtai_Img.length >= 3) {
						for(var j = 0; j < record[k].lydongtai_Img.length; j++) {
							var divimg = imgas[i].getElementsByTagName("li")[j];
							var imgarray = imgas[i].getElementsByTagName("img")[j];
							var immmg = divimg.getElementsByClassName('immggs')[0];
							realbi = record[k].lydongtai_Whb[j];
							divimg.style.cssText = "width: 31%;height: -webkit-calc(" + viewwidth * 0.31 + "px);margin: 0.5% -webkit-calc(" + viewwidth * 0.005 + "px)";
							if(realbi >= 1) {
								var num = viewwidth * 0.31 * 0.5 * (realbi - 1);
								immmg.style.cssText = "width: -webkit-calc(" + viewwidth * 0.31 * realbi + "px);height: 100%;margin-left: -webkit-calc(" + (-num) + "px);";
								imgarray.style.cssText = "width: -webkit-calc(" + viewwidth * 0.31 * realbi + "px);height: 100%;";
							} else {
								var num = (viewwidth * 0.31 / realbi - viewwidth * 0.31) / 2;
								immmg.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth * 0.31 / realbi + "px);margin-top: -webkit-calc(" + (-num) + "px);"
								imgarray.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth * 0.31 / realbi + "px)";
							}
						}
						k++;
					} else if(record[k].lydongtai_Img.length == 1) {
						var divimg = imgas[i].getElementsByTagName("li")[0];
						var imgarray = imgas[i].getElementsByTagName("img")[0];
						var immmg = divimg.getElementsByClassName('immggs')[0];
						realbi = record[k].lydongtai_Whb[0];
						console.log(realbi);
						if(realbi >= 1) {
							divimg.style.cssText = "width: 60%;max-height: -webkit-calc(" + viewwidth * 0.9 + "px);height: -webkit-calc(" + viewwidth * 0.6 / realbi + "px);margin: 0.5% -webkit-calc(" + viewwidth * 0.005 + "px)";
							immmg.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth * 0.6 / realbi + "px);";
							imgarray.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth * 0.6 / realbi + "px);";
						} else {
							divimg.style.cssText = "width: 66%;max-height: -webkit-calc(" + viewwidth + "px);height: -webkit-calc(" + viewwidth * 0.66 / realbi + "px);margin: 0.5% -webkit-calc(" + viewwidth * 0.005 + "px)";
							immmg.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth * 0.66 / realbi + "px);";
							imgarray.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth * 0.66 / realbi + "px);";
						}
						k++;
					} else if(record[k].lydongtai_Img.length == 2) {
						for(var j = 0; j < record[k].lydongtai_Img.length; j++) {
							var divimg = imgas[i].getElementsByTagName("li")[j];
							var imgarray = imgas[i].getElementsByTagName("img")[j];
							var immmg = divimg.getElementsByClassName('immggs')[0];
							realbi = record[k].lydongtai_Whb[j];
							divimg.style.cssText = "width: 38%;height: -webkit-calc(" + viewwidth * 0.36 + "px);margin: 0.5% -webkit-calc(" + viewwidth * 0.005 + "px)";
							if(realbi >= 1) {
								var num = (viewwidth * 0.36 - viewwidth * 0.38 * realbi) / 2;
								immmg.style.cssText = "width: -webkit-calc(" + viewwidth * 0.38 * realbi + "px);height: 100%;margin-left: -webkit-calc(" + num + "px);"
								imgarray.style.cssText = "width: -webkit-calc(" + viewwidth * 0.38 * realbi + "px);height: 100%;";
							} else {
								var num = (viewwidth * 0.38 / realbi - viewwidth * 0.36) / 2;
								immmg.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth * 0.38 / realbi + "px);margin-top: -webkit-calc(" + (-num) + "px);"
								imgarray.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth * 0.38 / realbi + "px);"
							}
						}
						k++;
					} else {
						console.log('11111111');
						k++;
					}

				}
			}
			var Ta_schoolwall = function(collage , num) {
				mui.ajax('https://www.lunyuwang.com/homeController/queryTaDongTai', {
					data: {
						lyuser_Collage: collage,
						lyuser_Card: plus.storage.getItem("card"),
						pageNumm: num
					},
					crossDomain: true, //强制使用5+跨域
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					//processData: false,
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: function(data) {
						if(data.queryTaDongTaiList == '0') {
						} else if(data.queryTaDongTaiList.length > 0 && data.queryTaDongTaiList.length < 2) {
							alllistcontent(data.queryTaDongTaiList,  num);
						} else if(num == 1 || data.queryTaDongTaiList.length == 2) {
							alllistcontent(data.queryTaDongTaiList,  num);
						}
						plus.nativeUI.closeWaiting();
					}
				})
			}

			var Ta_schoolfiends = function(collage , num) {
				mui.ajax('https://www.lunyuwang.com/homeController/queryTaFriend', {
					data: {
						lyuser_Collage: collage,
						lyuser_Card: plus.storage.getItem("card"),
						pageNumm: num
					},
					crossDomain: true, //强制使用5+跨域
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					//processData: false,
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: function(data) {
						var all_cont = data.TaCollageFriendList;
						if(all_cont == '0'){
							return ;
						}
						var str = template('list-Taschoolfriend', {
							"all_cont": all_cont
						});
						document.getElementById('ulcontent1').innerHTML = str;
						var viewwidth = document.body.clientWidth;
						var headimg = document.getElementsByClassName('fiends-div');
						for(var i = 0; i < headimg.length; i++) {
							headimg[i].getElementsByTagName('img')[0].style.height = "-webkit-calc(" + viewwidth * 0.12 + "px)";
						}
						plus.nativeUI.closeWaiting();
					}
				})
			}

			mui.plusReady(function() {
				starbar();
				var schooltext = plus.webview.currentWebview().school;
				document.getElementById('school-span').textContent = schooltext;
				document.getElementById('a-text').style.marginTop = (immersed / 2) + 'px';
				//加载数据
				schoolnum = 1
				schoolfriendnum = 1;
				Ta_schoolwall(schooltext , schoolnum);
				Ta_schoolfiends(schooltext , schoolfriendnum);
				//用a,b,c来控制访问后台次数，仅一次
				var old_back = mui.back;
				mui.back = function(){
					plus.navigator.setStatusBarStyle('dark');
					old_back();
				}
//				var a = true;
//				document.getElementById('slider').addEventListener('slide', function(e) {
//					if(e.detail.slideNumber != 1 && a == true) {
//						a = false;
//						Ta_schoolfiends(schooltext , 1);
//					}
//				});
				mui('.mui-table-view').on('tap', '.licont', function() {
					mui.openWindow({
						url: "schoolfriendhtml.html",
						id: "schoolfriendhtml.html",
						extras: {
							card: this.getElementsByTagName('span')[0].textContent
						}
					})
				})

				mui('.mui-table-view').on('tap', '.imggg', function() {
					var cardd = this.parentNode.children[1].textContent;
					mui.openWindow({
						url: "schoolfriendhtml.html",
						id: "schoolfriendhtml.html",
						extras: {
							card: cardd
						}
					})
				})

				//预览图片时下载文件到相册
				var imgsrc = '';
				mui(document.body).on('tap', 'img[data-preview-src]', function() {
					imgsrc = this.src;
				})

				document.getElementById('downloadbtn').addEventListener('tap', function() {
					var btnArray = ['保存', '取消'];
					mui.confirm('是否保存图片？', '保存图片到相册', btnArray, function(e) {
						if(e.index == 0) {
							var timestamp = (new Date()).valueOf();
							var downLoader = plus.downloader.createDownload(imgsrc, {
								method: 'GET'
							}, function(download, status) {
								var fileName = download.filename;
								//保存至本地相册
								plus.gallery.save(fileName, function() {
									mui.toast("保存成功");

								});
							});
							//开始下载任务
							downLoader.start();
						}
					})
				})
			})
			window.onload = function() {
				mui.plusReady(function() {
					mui(document).on('tap', '.deletedt', function() {
						mui.alert('111');
					})
				})
			}
		</script>

		<!--校园墙渲染模板-->
		<script type="text/template" id="Taschoolfriend-card">
			<% for(var i in record){ var item=record[i]; %>
			<li class="li-content">
				<p style="display: none;">
					<%=item.lydongtai_Id%>
				</p>
				<div class="mui-card">
					<div class="mui-card-header mui-card-media cardtop">
						<img src="<%=item.lyuser_FacePath%>" id="tigan<%=(i+1)%>" class="imggg" />
						<span style="display: none;"><%=item.lyuser_Card%></span>
						<div class="mui-media-body">
							<span id="name<%=(i+1)%>"><%=item.lyuser_NickName%></span>
							<div class="follow-div">
								<span>关注</span>
							</div>
							<p id="time<%=(i+1)%>">
								<%=item.lydongtai_Time%>
							</p>
						</div>

					</div>
					<div id="write-div<%=(i+1)%>" class="write-div">
						<%=item.lydongtai_Text%>
					</div>
					<div class="mui-card-content" style="margin: 1% 0;">
						<ul id="imgcontent" class="imgcontent">
							<% for(var j in item.lydongtai_Img){ var res=item.lydongtai_Img[j]; %>
							<li class="imgarea">
								<div class="immggs"><img src="<%=res%>" id="<%=(i+1)%>" data-preview-src="" data-preview-group="<%=item.lydongtai_Id%>" class="immmg" /></div>
							</li>
							<% } %>
						</ul>
						<% if(item.lydongtai_Address) { %>
						<div class="area-div">
							<img src="../images/dwei.png" class="area-img" />
							<span id=""><%=item.lydongtai_Address%></span>
						</div>
						<% } %>
					</div>
					<div class="mui-cardfooter">
						<div class="foot-cont">
							<div class="mui-card-footer-bar"><img src="../images/zann.png" class="bottom-png" /><span class="footer-num"><%=item.lydongtai_Good%></span></div>
						</div>
						<div class="foot-cont comment">
							<div class="mui-card-footer-bar commentcont"><text><%=item.lydongtai_Id%></text><img src="../images/talk.png" class="bottom-png" /><span class="footer-num">评论</span></div>
						</div>
						<div class="delete-div foot-cont">
							<div class="mui-card-footer-bar deletedt">
								<img src="../images/forword.png" class="bottom-png" />
								<text><%=item.lydongtai_Id%></text>
								<span class="footer-num">转发</span>
							</div>
						</div>
					</div>
				</div>
			</li>
			<% } %>
		</script>
		<!--列表渲染模板-->
		<script type="text/template" id="list-Taschoolfriend">
			<% for(var i in all_cont){ var item=all_cont[i]; %>
			<li class="licont">
				<span style="display: none;"><%=item.lyuser_Card%></span>
				<div id="fiends-div<%=(i+1)%>" class="fiends-div">
					<text class="card-div"><%=item.lyuser_Card%></text>
					<text class="card-div"><%=item.lyuser_Id%></text>
					<img src="<%=item.lyuser_FacePath%>" class="friend-heddimg" />
					<div class="text-div">
						<text><%=item.lyuser_NickName%></text>
						<span class="p-text"><%=item.lyuser_Major%></span>
					</div>

				</div>
			</li>
			<% } %>
		</script>
	</body>

</html>